<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits, watch, toRaw } from 'vue'
import { getApi, updateApi, createApi, unAuditApi } from '/@/api/psi/circulate'
import { useInModal } from '/@/hooks/useModal'
import { useSuccessMessage } from '/@/hooks/useMessage'
import { dataFormatter } from '/@/utils/data'

const props = defineProps(({
  id: String
}))

const emits = defineEmits(['change'])

const modal = useInModal()

const isAudited = ref(false)
const formRef = ref<FormMakerInstance>();
const formProps = reactive<FormMakerProps>({
  name: 'circulateForm',
  model: {
    type: 1,
    code: '',
    warehouseId: '',
    circulateDate: '',
    handler: '',
    isAudited: void 0
  },
  options: [
    {
      field: "code", label: "入库单号",
      component: {
        key: 'ElInput',
        props: {
          placeholder: '为空则自动生成'
        }
      }
    },
    {
      field: "warehouseId", label: "仓库",
      required: true,
      component: {
        key: 'SelectMaker',
        props: {
          dataSource: 'Warehouse'
        }
      }
    },
    { field: "circulateDate", label: "入库日期", required: true, component: 'ElDatePicker' },
    {
      field: "handler", label: "经手人", required: true, component: {
        key: 'SelectMaker',
        props: {
          dataSource: 'Employee'
        }
      }
    },
  ]
})

const tableRef = ref<YTableInstance>();
const tableProps = reactive<YTableProps>({
  height: "auto",
  data: [],
  columns: [
    { field: "materialCode", label: "品号", width: 100 },
    { field: "materialName", label: "品名", width: 100 },
    { field: "materialSpec", label: "规格", width: 100 },
    { field: "materialUnit", label: "单位", width: 100 },
    { field: "materialCalcUnit", label: "计量单位", width: 100 },
    { field: "quantity", label: "数量", width: 100 },
    { field: "calcQuantity", label: "计量", width: 100 },
    { field: "workOrderCode", label: "工单号", width: 100 },
    { field: "remark", label: "备注", edit: true },
  ],
  editOperas: ['add', 'delete', 'fill'],
  config: {
    edit: true
  }
});

const loadFormData = () => {
  if (props.id) {
    modal.loadingWarp(() => {
      getApi(props.id)
        .then(res => {
          Object.assign(formProps.model, res.data)
          tableRef.value.loadData(res.data.circulateItems)
          isAudited.value = res.data.isAudited
        })
    })
  }
}

watch(() => props.id, (id: string) => {
  loadFormData()
}, { immediate: true })

const handConfirm = async (btnTitle: string) => {
  await formRef.value.validate();
  modal.loadingWarp(async () => {
    if (props.id) {
      await updateApi({
        ...toRaw(formProps.model),
        circulateItems: tableRef.value.getData()
      })
    } else {
      await createApi({
        ...toRaw(formProps.model),
        circulateItems: tableRef.value.getData()
      })
    }

    useSuccessMessage(btnTitle + '成功')
    emits('change')
    loadFormData()
  })
}

const viewLayout: ViewLayoutProps = {
  buttons: [
    {
      title: '确定',
      type: 'primary',
      visible: () => !isAudited.value,
      onClick: handConfirm
    },
    {
      title: '保存并审核',
      type: 'primary',
      visible: () => !isAudited.value,
      onClick: (btnTitle) => {
        formProps.model.isAudited = true;
        handConfirm(btnTitle)
      }
    },
    {
      title: '反审核',
      type: 'primary',
      visible: () => isAudited.value,
      onClick: async (btnTitle: string) => {
        modal.loadingWarp(async () => {
          await unAuditApi(props.id)
          useSuccessMessage(btnTitle + '成功')
          emits('change')
          loadFormData()
        })

      }
    },
    { title: '取消', onClick: () => modal.close() },
  ]
}



</script>

<template>
  <ViewLayout v-bind="viewLayout">
    <template #header>
      <FormMaker v-bind="formProps" ref="formRef" />
    </template>
    <YTable v-bind="tableProps" ref="tableRef"></YTable>
  </ViewLayout>
</template>